<template>
  <div class="form">
    <el-dialog title="添加组件" v-model="isShow" width="800px" draggable>
      <el-form ref="formRef" :model="form" size="default" label-width="150px">
        <el-row :gutter="20">
          <el-col :span="10" v-for="(x, y) in columns">
            <el-form-item :key="y" :label="x.title" :prop="x.name">
              <template v-if="x.name == 'type'">
                <el-select v-model="form.type" placeholder="请选择" style="width: 200px;">
                  <el-option v-for="x in x.options" :value="x.value" :label="x.label" :key="y"></el-option>
                </el-select>
              </template>
              <template v-if="x.name == 'pid'">
                <el-cascader v-model="form.pid" :options="x.options" @change="handleChange" />
              </template>
              <template v-else>
                <el-input v-model="form[x.name]" :placeholder="'请输入' + x.title" @keyup.enter="submit" />
              </template>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer" style="display: flex;justify-content: right;">
        <el-button type="primary" @click="last">上一个</el-button>
        <el-button type="primary" @click="submit">保 存</el-button>
        <el-button @click="close">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script setup>
import { reactive, ref, watch } from 'vue'

const props = defineProps({
  show: {
    type: Boolean,
    defalut: ''
  },
  columns: {
    type: Array,
    defalut: null
  },
  data: {
    type: Object,
    defalut: null
  },
  last: {
    type: Object,
    defalut: null
  }
})

const form = reactive({})
const isShow = ref(false)
const formRef = ref(null)
watch(() => props.data, newval => {
  props.columns.map(x=>{
    form[x.name] = ''
  })
})
watch(() => props.show, newval => {
  isShow.value = newval
})
const emit = defineEmits(['submit', 'close'])
function close() {
  emit('close')
}

function submit() {
  emit('submit', form)
}

function last() {
  props.columns.map(x=>{
    form[x.name] = props.last[x.name]
  })
}

function handleChange(e){
  form.pid = e[1]
}
</script>
